<template>

    <van-tabs v-model:active="active" @change="onChange">
        <van-tab title="收到的申请" name="apply"></van-tab>
        <van-tab title="我的申请" name="myApply"></van-tab>
    </van-tabs>

    <van-card
            v-if="!flag"
            v-for="friend in userFriends"
            :desc="friend.remark"
            :title="friend.username"
            :thumb="friend.avatar ? friend.avatar : defaultPicture"
    >
        <p style="font-size:14px;color: #999;width: 80px" v-if="friend.status===1" type="primary">

        </p>
        <template #footer>
            <van-button v-if="friend.status === 0" size="normal" @click="doAgree(friend.id)">同意</van-button>
            <van-button v-if="friend.status === 0" size="normal" @click="doDisagree(friend.id)">拒绝</van-button>
            <p v-if="friend.status===1" style="font-size: 20px">
                <van-icon name="certificate" size="20px"/>
                已被接受
            </p>
        </template>
    </van-card>

    <van-card
            v-if="flag"
            v-for="friend in userFriends"
            :desc="friend.remark"
            :title="friend.username"
            :thumb="friend.avatar ? friend.avatar : defaultPicture"
    >
        <template #footer>
            <van-icon name="user-o" size="20px">等待验证</van-icon>
<!--            <p v-if="friend.status===1" style="font-size: 20px">-->
<!--                <van-icon name="certificate" size="20px"/>-->
<!--                已被接受-->
<!--            </p>-->
        </template>
    </van-card>
    <van-empty description="暂无申请" v-if="userFriends.length < 1"/>
</template>

<script setup lang="ts">
    import {useRouter} from 'vue-router'
    import {onMounted,ref} from "vue";
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";
    const router = useRouter();
    import {defaultPicture} from '../common/userCommand';


    const userFriends = ref([])


    // onMounted(async () =>{
    //     const res = await myAxois.get("/friend/show/apply");
    //     if(res.data.code === 0){
    //         userFriends.value = res.data.data;
    //     }else{
    //         showFailToast(res.data.msg)
    //     }
    // })

    const flag = ref<boolean>(true);
    const listApply = async () =>{
        const res = await myAxois.get("/friend/show/apply");
        if(res.data.code === 0){
            userFriends.value = res.data.data;
            flag.value = false;
        }else{
            showFailToast(res.data.msg)
        }
    }

    const listMyApply = async () =>{
        const res = await myAxois.get("/friend/show/send");
        if(res.data.code === 0){
            userFriends.value = res.data.data;
            flag.value = true;
        }else{
            showFailToast(res.data.msg)
        }
    }

    const onChange = (name) =>{
        if(name === "apply"){
            listApply()
        }else{
            listMyApply()
        }
    }

    //申请同意
    const doAgree = async (id:number) =>{
        // console.log("申请同意")
        const res = await myAxois.post(`/friend/agree/${id}`);
        if(res.data.code === 0){
            showSuccessToast("已同意");
            window.location.reload();
        }else{
            showFailToast(res.data.msg);
        }
    }

    //拒绝申请
    const doDisagree = async (id:number) =>{
        const res = await myAxois.post(`/friend/disagree/${id}`);
        if(res.data.code === 0){
            window.location.reload();
        }else{
            showFailToast(res.data.msg);
        }
    }

</script>

<style scoped>
    van-card__desc van-ellipsis{
        font-size: 20px;
    }
</style>